<template>
  <div>
    <particlesJs
        class="back_img">
    </particlesJs>
    <div class="background">
      <div class="login">
        <el-form ref="form" v-if="loginView" :model="loginForm" :rules="ruleForm" status-icon>
          <div class="login_title">
            <h1 class="bigtitle">Login</h1>
          </div>
          <div class="login_input">
            <el-form-item prop="name">
              <el-input v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"
                        prefix-icon="el-icon-user" type="text"
              ></el-input>
            </el-form-item>
          </div>
          <div class="login_input">
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"
                        prefix-icon="el-icon-unlock" type="password"
              ></el-input>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button :loading="logining" class="homeBut" size="mini"
                       type="primary" @click="submit">
              登录
            </el-button>
            <el-button class="homeBut" size="mini" type="primary" @click="loginView=0">
              注册
            </el-button>
          </el-form-item>
        </el-form>
        <el-form ref="form" v-if="!loginView" :model="loginForm" :rules="ruleForm" status-icon>
          <div class="login_title">
            <h1 class="bigtitle">Register</h1>
          </div>
          <div class="login_input">
            <el-form-item prop="name">
              <el-input v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"
                        prefix-icon="el-icon-user" type="text"
              ></el-input>
            </el-form-item>
          </div>
          <div class="login_input">
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"
                        prefix-icon="el-icon-unlock" type="password"
              ></el-input>
            </el-form-item>
          </div>
          <!--                    <div class="login_input">-->
          <!--                        <el-form-item prop="code">-->
          <!--                            <el-input v-model="loginForm.code"-->
          <!--                                      style="width: 150px; float: left"></el-input>-->
          <!--                            <el-image :src="captchaImg" class="captchaImg" @click="getCaptcha"></el-image>-->
          <!--                        </el-form-item>-->
          <!--                    </div>-->
          <el-form-item>
            <el-button class="homeBut" size="mini" type="primary" @click="registered">
              确定注册
            </el-button>
            <el-button class="homeBut" size="mini" type="primary" @click="loginView=1">
              去登陆
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="item">
        <div class="text">
          <h1 style="font-size: 30px">欢迎回来</h1>
          <h3>无论才能、知识多么卓越，如果缺乏热情，则无异于纸上画饼充饥，无补于事</h3>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import qs from "qs";
import particlesJs from "@/components/particlesLogin/Particles.vue"

export default {
  components: {
    particlesJs
  },
  data() {
    return {
      loginView: 1,
      logining: false,
      loginForm: {
        username: 'admin',
        password: '123',
        code: '11111',
        token: ''
      },
      ruleForm: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          // {min: 5, max: 5, message: '长度为 5 个字符', trigger: 'blur'}
        ],
      },
      captchaImg: ''
    }
  },
  methods: {
    submit(event) {
      let that = this
      this.logining = true;
      if (this.loginForm.username === "admin" && this.loginForm.password === "123") {
        console.log('true')
        this.$router.push("/")
      } else {
        this.$confirm('账号或密码错误，请重新提交', '进行提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      }
    },
    registered() {
      this.axios.get("/sysUser/registered", {
        params: {
          'username': this.loginForm.username,
          'password': this.loginForm.password,
        }
      }).then(res => {
        this.$message.info(res.data.msg)
      })
    },
    // getCaptcha() {
    //   let that = this
    //   this.axios.get('/captcha').then(res => {
    //     that.loginForm.token = res.data.data.token
    //     that.captchaImg = res.data.data.captchaImg
    //     that.loginForm.code = ''
    //   })
    // },
    resetForm() {
      this.$refs.form.resetFields();
    }
  },
  created() {
    this.getCaptcha()
  }
}
</script>
<style lang="scss" scoped>

body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.background {
  height: 420px;
  width: 700px;
  margin: 130px auto 0px;
  backdrop-filter: blur(3px);
  border-radius: 5px;
  background: rgb(234, 246, 246, 0.3);
  box-shadow: 0px 0px 40px -1px rgba(0, 0, 0, 0.4);
  z-index: 99;
  position: relative;
}

.item {
  width: 300px;
  height: 400px;
  // background-color:#1cc4e7;
  float: right;
  margin: 0px 0px 0px 0px;
  padding: 10px 25px;
  // #53b5e6;

}

.text {
  text-align: center;
  margin-top: 40%;
  // color: #ececec;
  // font-family: STXinwei;
  color: black;
}


.homeBut {
  width: 80px;
  margin-bottom: 5px;
  margin-top: 18px;
  margin-left: 13%;
  background-color: #FFF8F3;
  border-color: #FFF8F3;
  border-radius: 7px;
  box-shadow: 0px 0px 40px -19px rgba(0, 0, 0, 0.4);
  color: black;
}

.login {
  width: 270px;
  height: 500px;
  float: right;
  margin: 0px 0px 0px 0px;
  background-color: rgb(102, 191, 191);
  padding: 10px 25px;
  position: relative;
  top: -50px;
  right: 10px;
  margin-right: 25px;
}

.login_title {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 50px;

}

.login_input:nth-child(2) {
  width: 260px;

}

.login_input:nth-child(3) {
  width: 260px;
}


.back_img {
  background-size: 100% 100%;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.bigtitle {
  // font-family: "STXingkai";
  font-size: 35px;
  color: white;
  text-align: center;
}

.captchaImg {
  float: left;
  margin-left: 8px;
  border-radius: 4px;
}
</style>
